<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>常见问题</el-breadcrumb-item>
      <el-breadcrumb-item>问题列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="20">
         <el-col :span="7">
          <el-date-picker
            v-model="timeRange.createtime"
            type="daterange"
            range-separator="至"
            start-placeholder="创建时间"
            end-placeholder="创建时间"
            value-format="yyyy-MM-dd"
          >
            >
          </el-date-picker>
        </el-col>

            <el-col :span="8">
          <el-input
            placeholder="问题关键字"
            v-model="queryInfo.question"
            clearable

          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="queryissue()"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span = "8">
            <el-button type="primary" @click="handleAddNewIssue()"
            >新增</el-button>
        </el-col>

      </el-row>

 <el-table :data="issueList" border stripe>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="问题标题" prop="question"></el-table-column>
        <el-table-column label="问题答案" prop="answer"></el-table-column>

        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">

            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="getissue(scope.row.id)"
              size="mini"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteissue(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="问题信息" :visible.sync="showDialogVisible" width="50%">
       <el-row :gutter="20">
           <el-col :span="2">
        <label for="question">问题标题:</label>
        </el-col>
            <el-col :span="10">
        <el-input v-model="nowIssue.question">
          </el-input>
</el-col>
       </el-row>

<el-row :gutter="20">
           <el-col :span="2">
        <label for="answer">问题答案:</label>
        </el-col>
            <el-col :span="10">
        <el-input v-model="nowIssue.answer" type="textarea" :rows="10">
          </el-input>
            </el-col>
</el-row>
            <el-row :gutter="20" type="flex" justify="end">
<el-col :span="7" >
        <el-button type="primary" @click="updateissue()"
            >修改</el-button>
            </el-col>
       </el-row>

    </el-dialog>

    <el-dialog title="新增问题" :visible.sync="newDialogVisible" width="50%">
    <el-row :gutter="20">
           <el-col :span="2">
        <label for="question">问题标题:</label>
                    </el-col>
            <el-col :span="10">
        <el-input v-model="newIssue.question">
          </el-input>
     </el-col>
       </el-row>

    <el-row :gutter="20">
           <el-col :span="2">
        <label for="answer">问题答案:</label>
                    </el-col>
            <el-col :span="10">
        <el-input v-model="newIssue.answer" type="textarea" :rows="10">
          </el-input>
            </el-col>
            </el-row>

            <el-row :gutter="20" type="flex" justify="end">
<el-col :span="7">

        <el-button type="primary" @click="insertissue()" icon="el-icon-search"
            >添加</el-button>
     </el-col>
       </el-row>

    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        question: '',
        createtime: null,

        pageSize: 10

      },
      // 时间起始
      timeRange: {
        createtime: null
      },
      nowIssue: {},
      newIssue: {},
      // 标签列表
      issueList: [],
      total: 0,
      showDialogVisible: false,
      newDialogVisible: false

    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getissueList(1)
  },
  methods: {
    async getissueList (page) {
      const { data: res } = await this.$http.get('issues/all/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.issueList = res.data.records
      console.log(res.data)
      this.total = res.data.total
    },

    // 新增界面
    handleAddNewIssue () {
      this.newDialogVisible = true
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getissueList(newPage)
    },

    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getissueList(1)
    },

    // 根据条件 搜索问题信息
    async queryissue () {
      let startdate = this.timeRange.createtime[0]
      let enddate = this.timeRange.createtime[1]

      const { data: res } = await this.$http.post(
        'issues/search',
        { 'question': this.queryInfo.question,
          'startdate': startdate,
          'enddate': enddate }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.issueList = []
      this.issueList = res.data
      this.total = this.issueList.length
    },

    async getissue (id) {
      var { data: res } = await this.$http.get('issues/look/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = true
      this.nowIssue = res.data
    },

    async updateissue () {
      const { data: res } = await this.$http.post(
        'issues/update',
        { 'id': this.nowIssue.id, 'question': this.nowIssue.question, 'answer': this.nowIssue.answer }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false
      this.getissueList(this.queryInfo.currentPage)
      // this.nowIssue = res.data
      // console.log(res.data.records)
    },

    // 删除用户
    async deleteissue (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该问题, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('issues/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getissueList(this.queryInfo.currentPage)
    },

    // 新增

    async insertissue () {
      const { data: res } = await this.$http.post(
        'issues/insert',
        { 'question': this.newIssue.question, 'answer': this.newIssue.answer }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.newDialogVisible = false
      this.getissueList(this.queryInfo.currentPage)
      // this.nowIssue = res.data
      // console.log(res.data.records)
    }

  },
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }
</style>
